<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/detail.css">
</head>
<body>
	<div class="basic">
		<h1 id="productName">${product.pname }</h1>
		<div class="boxDetail">
			<div class="fn-clear  mb25">
				<dl class="fn-left w300">
					<dd class="basic-all color-orange-text">
						<em class="text-xxxl num-family">${product.ppricetotal }</em> <span
							class="font-18px basic-text ">元</span>
					</dd>
					<dt class="minus-mt-5">标的总额</dt>
				</dl>
				<dl class="fn-left w240">
					<dd class="basic-all">
						<em class="text-xxxl  num-family color-dark-text "
							style="margin-left: -4px;">${product.prate }</em> <em
							class="font-24px ">%</em>
					</dd>
					<dt class="minus-mt-5">年利率</dt>
				</dl>
				<dl class="fn-left w140">
					<dd class="basic-all">
						<em class=" text-xxxl num-family color-dark-text">${product.ptimelimit }</em>
						<span class="font-18px basic-text">个月</span>
					</dd>
					<dt class="minus-mt-5">还款期限</dt>
				</dl>
				<dl class="fn-left w140">
					<dd class="basic-all">
						<em class=" text-xxxl num-family color-dark-text">${schedule }</em>
						<span class="font-18px basic-text">%</span>
					</dd>
					<dt class="minus-mt-5">进度</dt>
				</dl>
			</div>
			<div class="opera">
				<c:choose>
					<c:when test="${product.ppricetotal == product.ppricecurrent }">
						<dl>
							<dd class="basic-all">
								<em class=" text-xxxl num-family color-dark-text"> <fmt:formatDate
										value="${product.pdonetime }" pattern="yyyy-MM-dd" />
								</em>
							</dd>
							<dt class="minus-mt-5">还款期限</dt>
						</dl>
					</c:when>
					<c:otherwise>
						<dl>
							<dd class="basic-all color-orange-text">
								<em class="text-xxxl num-family">${product.ppricetotal-product.ppricecurrent }</em>
								<span class="font-18px basic-text ">元</span>
							</dd>
							<dt class="minus-mt-5">剩余金额</dt>
						</dl>
						<dl>
							<c:choose>
								<c:when test="${user == null }">
									<dt class="minus-mt-5">
										账户余额（<a href="#" data-toggle="modal" data-target="#loginModal">登录</a>后可见）
									</dt>
								</c:when>
								<c:otherwise>
									<dd class="basic-all color-orange-text">
										<em class="text-xxxl num-family">${user.umoney }</em> <span
											class="font-18px basic-text ">元</span>
									</dd>
									<dt class="minus-mt-5">账户余额</dt>
								</c:otherwise>
							</c:choose>
						</dl>
						<div class="form-group">
							<input type="text" id="money" class="form-control"
								placeholder="输入金额为50(元)的整数倍 ">
						</div>
						<button type="button" id="buySubmit" class="btn btn-success">投标</button>
					</c:otherwise>
				</c:choose>
			</div>
		</div>
		<h1>审核状态</h1>
		<div class="boxDetail">
			<table class="ui-table-auditoria table table-bordered">
				<thead>
					<tr class="ui-list-header">
						<th width="33.3%" class="ui-list-title text-left pl130"><span>审核项目</span></th>
						<th width="33.3%" class="ui-list-title text-center">状态</th>
					</tr>
				</thead>
				<tbody>
					<tr class="">
						<td class="text-left pl130">
							<div class="ui-td-bg">信用报告</div>
						</td>
						<td class="text-center">
							<div class="ui-td-bg">
								<i class="  icon-circle-checked "></i><span
									class="pl10 text-green-color">已完成</span>
							</div>
						</td>
					</tr>
					<tr class="">
						<td class="text-left pl130">
							<div class="ui-td-bg">身份认证</div>
						</td>
						<td class="text-center">
							<div class="ui-td-bg">
								<i class="  icon-circle-checked "></i><span
									class="pl10 text-green-color">已完成</span>
							</div>
						</td>
					</tr>
					<tr class="two-line">
						<td class="text-left pl130">
							<div class="ui-td-bg">工作认证</div>
						</td>
						<td class="text-center">
							<div class="ui-td-bg">
								<i class="  icon-circle-checked "></i><span
									class="pl10 text-green-color">已完成</span>
							</div>
						</td>
					</tr>
					<tr class="">
						<td class="text-left pl130">
							<div class="ui-td-bg">收入认证</div>
						</td>
						<td class="text-center">
							<div class="ui-td-bg">
								<i class="  icon-circle-checked "></i><span
									class="pl10 text-green-color">已完成</span>
							</div>
						</td>
					</tr>
					<tr class="two-line last">
						<td class="text-left pl130">
							<div class="ui-td-bg">实地认证</div>
						</td>
						<td class="text-center">
							<div class="ui-td-bg">
								<i class="  icon-circle-checked "></i><span
									class="pl10 text-green-color">已完成</span>
							</div>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<h1>借款描述</h1>
		<div class="boxDetail">
			<p>${product.pdesc }</p>
		</div>
	</div>
	<div class="modal fade" id="loginModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">请登录</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" id="login" role="form">
						<div class="form-group">
							<input type="tel" class="form-control" name="phone"
								placeholder="请输入电话号码">
						</div>
						<div class="form-group">
							<input type="password" class="form-control" name="password"
								placeholder="请输入电话号码">
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
					<button type="button" id="loginSubmit" class="btn btn-primary">登录</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
	<input class="hidden" id="user" value="${user.userid }">
	<input class="hidden" id="product" value="${product.productid }">
	<input class="hidden" id="userMoney" value="${user.umoney }">
	<script type="text/javascript">
		$(document).ready(function() {
			var search = window.location.search;
			$("#loginSubmit").click(function() {
				login("user/login", "index" + search);
			});
			$("#buySubmit").click(function() {
				var userId = $("#user").val();
				if (userId > 0) {
					var money = $("#money").val();
					var productId = $("#product").val();
					var userMoney = $("#userMoney").val();
					if (money > 0 && money % 50 == 0 && parseInt(userMoney) > parseInt(money)) {
						buyProduct("product/buy", money, productId);
					} else {
						alert("请输入正确的金额或者您的金额不足！");
					}
				} else {
					$("#loginModal").modal("show");
				}
			});
		});
	</script>
</body>
</html>